<script setup lang="ts">
  const title = computed(() => window.app.config.globalProperties.$config.title)
</script>
<template>
  <transition name="fade-transform" mode="out-in">
    <router-view v-slot="{ Component , route}">
      <div class="topBg" v-show="route.meta.hidden">
        <span >{{title}}</span>
        <img class="header" src="@/assets/header.png" alt="" />
      </div>

      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </transition>
  <NaiveProvider></NaiveProvider>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
}
.dg.ac {
  display: none;
}
.mapboxgl-logo {
  display: none;
}

.amap-marker-label {
  background: transparent !important;
  border: 0px solid black;
}
.header {
  position: absolute;
  top: -7px;
  border: none;
  z-index: 9;
  width: 1895px;
  height: 136px;
}

.footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  border: none;
  z-index: 9;
}
.topBg {
  text-align: center;
  width: 1895px;
  height: 145px;
  background: linear-gradient(269deg, #4242420a, #0d0d0d8a, #4242420a);
  /* background-image: url('./assets/bg.png'); */
  background-repeat: no-repeat;
  background-size: 1895px 145px;
  position: absolute;
  top: 0;
  left: 979px;
  z-index: 9999;
  span{
    font-size: 60px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    background: linear-gradient(180deg, #94f0ff 10%, #35d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
